<template>
  <div>
    <Row>
      <Col>
        <HomeCard desc="statistics" title="数据统计">
          <ActivePlate :infoList="infoCardData" />
        </HomeCard>
      </Col>
    </Row>
    <Row :gutter="20" v-if="ok===true">
      <i-col :lg="6" :md="24">
        <HomeCard desc="User from" title="通过率">
          <ChartPie :value="pieData" ref="test"/>
        </HomeCard>
      </i-col>

       <i-col :lg="18" :md="24">
        <HomeCard desc="User active" title="近七日执行结果">
          <ChartLine :value="lineData" />
        </HomeCard>
      </i-col>
    </Row>
  </div>
</template>

<script>
import ActivePlate from '../../components/active-plate/active-plate'; // 顶部数据
import HomeCard from './components/card'; // 排版
import ChartPie from './components/chart-pie';
import ChartLine from './components/chart-line';
import { Home } from '../../api/api'


export default {
  name: 'Home',
  components: {
    HomeCard,
    ActivePlate,
    ChartPie,
    ChartLine
  },
  props: {},
  data() {
    return {
      ok:'false',
      lineData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      },
      adModal:true,
      api_all:'',
      infoCardData: [
        {
          title: '项目总数',
          icon: 'md-person-add',
          count: 1,
          color: '#11A0F8'
        },
        { title: '接口总数', icon: 'md-locate', count: 232, color: '#FFBB44 ' },
        {
          title: '扩展方法',
          icon: 'md-help-circle',
          count: 1,
          color: '#7ACE4C'
        },
        { title: '用例总数', icon: 'md-share', count: 657, color: '#11A0F8' },
        {
          title: '场景总数',
          icon: 'md-chatbubbles',
          count: 12,
          color: '#91AFC8'
        },
        { title: '用户数量', icon: 'md-map', count: 14, color: '#91AFC8' }
      ],
      pieData: [
        { value: 1, name: '通过用例' ,itemStyle:{normal:{color: "#19BE6B"}}},
        { value: 1, name: '失败用例' ,itemStyle:{normal:{color: "#ea4056"}}},
      ],
    };
  },
  computed: {},
  filters: {},
  created() {

  },
  watch: {

  },

  mounted() {
    this.statistics()
  },
  beforeCreate() {

  },
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    statistics() {
      Home().then(res => {
        let data = res.data
        this.infoCardData[0].count = data.project_all
        this.infoCardData[1].count = data.api_all
        this.infoCardData[2].count = data.method_all
        this.infoCardData[3].count = data.testcase_all
        this.infoCardData[4].count = data.testsuite_all
        this.infoCardData[5].count = data.user_all


        this.pieData[0].value = data.reports_pass
        this.pieData[1].value = data.reports_fail

        this.lineData = data.week_count
        this.ok = true
      })
    },
  }

};
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
